<template name="auto-dialog">
	<view class="auto-dialog">
		<view class="card-panel">
			<view class="head">
				<text>{{title}}</text>
			</view>
			<view class="content" v-if="content">
				<div v-html="content"></div>
			</view>
			<div class="all-btn-style">
				<view @click="clickColse()" style="flex: 1;padding: 0 20rpx;">
					<div class="all-btn" type="default">{{btnColseText}}</div>
				</view>
				<view @click="clickSure()" style="flex: 1;">
					<div class="all-btn" type="default" style="background: #FD453D;color:#ffffff">{{btnText}}</div>
				</view>
			</div>
			
		</view>
		<view class="footer-close" v-if="closeIcon" @click="clickColse()">
			<icon type="cancel" size="26" color="#ffffff"/>
		</view>
	</view>
</template>

<script>
	export default {
		name:"auto-dialog",
		props:{
			title: {
				type: String,
				default: "温馨提示"
			},
			content: {
				type: String,
				default: ""
			},
			btnText: {
				type: String,
				default: "继续作答"
			},
			btnColseText:{
				type: String,
				default: "退出"
			},
			closeIcon: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			clickColse() {
				this.$emit('closeBtn')
			},
			clickSure() {
				this.$emit('ok')
			}
		}
	}
</script>

<style lang="scss" scoped>
	@function torem($rpx){  //$rpx为需要转换的字号
	    @return #{$rpx * 100 / 750 / 4}rem; 
	}
	.auto-dialog {
		text-align: center;
	}
	.all-btn-style{
		display: flex;
	}
	.card-panel {
		display: flex;
		flex-direction: column;
		border-radius: torem(10);
		background-color: #ffffff;
		padding: torem(30);
		width: 70%;
		margin: 0 auto;
		.head {
			color: #999999;
			font-size: torem(28);
			
		}
		.content {
			color: #333333;
			font-size: torem(28);
			padding: torem(20) 0 torem(38) 0;
			line-height: torem(42);
			// text-align: left;
		}
		.all-btn {
			background-color: #F6F8FC;
			width:torem(220) ;
			color: #333333;
			height: torem(82);
			border-radius: torem(45);
			font-weight: 400;
			line-height: torem(82);
			margin-bottom: torem(10);
			font-size: torem(28);
			flex: 1;
			border: none;
		}
	}
	.footer-close {
		margin-top: torem(100);
	}
</style>
